<template>
  <!-- 总体 -->
  <div class="container">
    <!-- 头部 -->
    <div class="home_top">
      <div class="home_top_left">
        <img
          class="logo"
          src="@/assets/logo.png"
          alt=""
          width="32px"
          height="32px;"
        />
        <span v-show="showTitle" class="title-text">&nbsp;&nbsp;进销存</span>
      </div>
      <!-- 控制导航显示隐藏 -->
      <div class="home_dh">
        <el-radio-group
          v-model="isCollapse"
          style="margin-bottom: 20px; margin-top: 22px"
        >
          <el-button
            class="collapsebut"
            :class="isCollapse ? 'dh_left' : 'dh_right'"
            @click="collapsefun"
            style="
              background-color: #1890ff;
              border: 0;
              font-size: 28px;
              color: white;
            "
          >
            <i :class="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
          </el-button>
        </el-radio-group>
        <!-- 搜索 -->
        <div class="ccc" @click="toggleSearch">
          <i class="el-icon-search"></i>
        </div>
        <!-- 搜索框 -->
        <div class="search-box" v-show="showSearch">
          <el-select
            v-model="selectedMenu"
            placeholder="选择菜单"
            @change="handleSelectChange"
          >
            <el-option
              v-for="item in menuItems"
              :key="item.path"
              :label="item.label"
              :value="item.path"
            ></el-option>
          </el-select>
        </div>

        <div class="hy-gly">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link"> 欢迎您，管理员 </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                icon="el-icon-finished"
               command="qiehuan"
                >切换部门</el-dropdown-item
              >
             
              <div>
                <el-dropdown-item
                  icon="el-icon-edit-outline"
                  @click.native="showChangePasswordDialog"
                >
                  密码修改
                </el-dropdown-item>
                
              </div>

              <el-dropdown-item icon="el-icon-circle-plus-outline"
                >系统设置</el-dropdown-item
              >
              <el-dropdown-item
                icon="el-icon-refresh"
                @click.native="clearCache"
                >清理缓存</el-dropdown-item
              >

              <el-dropdown-item
                icon="el-icon-house"
                divided
                @click.native="back()"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <div class="home_date">
            当前月度: <span>{{ homeData3.beginYear }}</span
            >-
            <span>{{ homeData3.month }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 导航 -->

    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside :class="isCollapse ? 'aside_min' : 'aside_max'">
        <el-menu
          default-active="1-4-1"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
        >
          <el-menu-item index="/home" @click="cgrkto('/analysis')">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span slot="title">库存管理</span>
            </template>
            <el-submenu index="2-1">
              <template slot="title">入库管理</template>
              <el-menu-item index="/rkgl" @click="cgrkto('/cgrk')">采购入库</el-menu-item>
              <el-menu-item index="/cgthrk" @click="cgrkto('/cgthrk')">采购退货出库(红入)</el-menu-item>
              <el-menu-item index="/pyrk" @click="cgrkto('/pyrk')">盘盈入库</el-menu-item>
              <el-menu-item index="/zdrk" @click="cgrkto('/zdrk')">涨吨入库</el-menu-item>
              <el-menu-item index="/qtrk" @click="cgrkto('/qtrk')">其他入库</el-menu-item>
            </el-submenu>
            <el-submenu index="2-2">
              <template slot="title">出库管理</template>
              <el-menu-item index="2-2-1" @click="cgrkto('/xsck')">销售出库</el-menu-item>
              <el-menu-item index="2-2-3" @click="cgrkto('/pkck')">盘亏出库</el-menu-item>
              <el-menu-item index="2-2-4" @click="cgrkto('/qtck')">其他出库</el-menu-item>
            </el-submenu>
            <el-submenu index="2-3">
              <template slot="title">其他管理</template>
              <el-menu-item index="2-3-1" @click="cgrkto('/kctb')">库存调拨</el-menu-item>
              <el-menu-item index="2-3-2" @click="cgrkto('/cbtz')">成本调整</el-menu-item>
              <el-menu-item index="2-3-3" @click="cgrkto('/kcpd')">库存盘点</el-menu-item>
            </el-submenu>
            <el-submenu index="2-4">
              <template slot="title">即时库存</template>
              <el-menu-item index="2-4-1" @click="cgrkto('/wlkc')">物料库存</el-menu-item>
              <el-menu-item index="2-4-2" @click="cgrkto('/wlpckc')">物料批次库存</el-menu-item>
              <el-menu-item index="2-4-3" @click="cgrkto('/ckwlkc')">仓库物料库存</el-menu-item>
              <el-menu-item index="2-4-5" @click="cgrkto('/xxkc')">详细库存</el-menu-item>
            </el-submenu>
            <el-submenu index="2-5">
              <template slot="title">出入库统计</template>
              <el-menu-item index="2-5-1" @click="cgrkto('/crkyhz')">出入库月汇总</el-menu-item>
              <el-menu-item index="2-5-2" @click="cgrkto('/crkrdz')">出入库日汇总</el-menu-item>
              <el-menu-item index="2-5-3" @click="cgrkto('/crkmx')">出入库明细</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span slot="title">基础数据</span>
            </template>
            <el-menu-item index="/cus" @click="cgrkto('/customer')">客户</el-menu-item>
            <el-menu-item index="/sup" @click="cgrkto('/supplier')">供应商</el-menu-item>
            <el-menu-item index="/war" @click="cgrkto('/warehouse')">仓库</el-menu-item>
            <el-menu-item index="/mec" @click="cgrkto('/materialCategory')">物料分类</el-menu-item>
            <el-menu-item index="/mte" @click="cgrkto('/material')">物料</el-menu-item>
            <el-menu-item index="/meu" @click="cgrkto('/unit')">计量单位</el-menu-item>
            <el-menu-item index="/crc" @click="cgrkto('/currency')">币种</el-menu-item>
            <el-menu-item index="/bkc" @click="cgrkto('/bankAccount')">银行账户</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">发票登记</span>
            </template>
            <el-menu-item index="5-1"  @click="cgrkto('/UserManagement')">销售发票</el-menu-item>
            <el-menu-item index="5-2"  @click="cgrkto('/RoleManagement')">销售发票(红冲)</el-menu-item>
            <el-menu-item index="5-3" @click="cgrkto('/CaidanManagement')">销售发票(退货)</el-menu-item>
            <el-menu-item index="5-4"  @click="cgrkto('/BumenManagement')">采购发票</el-menu-item>
            <el-menu-item index="5-6"  @click="cgrkto('/CodeCheckRule')">采购发票(红冲)</el-menu-item>
            <el-menu-item index="5-8"  @click="cgrkto('/roleUserList')">采购发票(退货)</el-menu-item>
          </el-submenu>
          <!--  -->
          <el-submenu index="11">
            <template slot="title">
              <i class="el-icon-s-operation"></i>
              <span slot="title">销售管理</span>
            </template>
            <el-menu-item index="/cus1">销售报价</el-menu-item>
            <el-menu-item index="/sup1">销售订单</el-menu-item>
            <el-menu-item index="/war1">销售统计</el-menu-item>
          </el-submenu>
          <!--  -->
          <!--  -->
          <el-submenu index="12">
            <template slot="title">
              <i class="el-icon-s-ticket"></i>
              <span slot="title">采购管理</span>
            </template>
            <el-menu-item index="/cus2">采购申请</el-menu-item>
            <el-menu-item index="/sup2">采购询价</el-menu-item>
            <el-menu-item index="/war2">供应报价</el-menu-item>
            <el-menu-item index="/war2">采购比价</el-menu-item>
            <el-menu-item index="/war2">采购订单</el-menu-item>
            <el-menu-item index="/war2">采购统计</el-menu-item>
          </el-submenu>
          <!--  -->
          <!--  -->
          <el-submenu index="13">
            <template slot="title">
              <i class="el-icon-s-promotion"></i>
              <span slot="title">业务监控</span>
            </template>
            <el-menu-item index="/cus55">审批信息</el-menu-item>
            <el-menu-item index="/sup55">月度结账</el-menu-item>
            <el-menu-item index="/war55">单据选项</el-menu-item>
          </el-submenu>
          <!--  -->
          <!--  -->
          <el-submenu index="14">
            <template slot="title">
              <i class="el-icon-s-opportunity"></i>
              <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="/cus33">用户管理</el-menu-item>
            <el-menu-item index="/sup33">角色管理</el-menu-item>
            <el-menu-item index="/war33">部门管理</el-menu-item>
            <el-menu-item index="/war33">职务管理</el-menu-item>
            <el-menu-item index="/war33">通讯录</el-menu-item>
            <el-menu-item index="/war33">菜单管理</el-menu-item>
          </el-submenu>
          <!--  -->
        </el-menu>
      </el-aside>
      <el-container class="context_container">
        <div style="width: 97%; margin: 0 auto">
          <div class="container_top" v-show="breadList.length != 0">
            <el-breadcrumb separator="" class="breadcrumb">
              <el-breadcrumb-item
                class="yiru"
                v-for="(item, index) in breadList"
                :key="index"
                @click="toMenu(item)"
                :to="item.path"
              >
                {{ item.meta.title }}
                <span class="delete-icon" @click="removeBreadcrumb(index)">
                  <i class="el-icon-close"></i>
                </span>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div class="routerck">
            <router-view></router-view>
          </div>
        </div>
      </el-container>
    </el-container>
     <el-dialog
              v-model="showDepartmentModal"
                :key="showDepartmentModal"
                title="部门切换（当前部门）"
                :visible.sync="showDepartmentModal"
                width="30%"
              >
                <el-form>
                  <el-form-item label="选择部门">
                    <el-select
                      v-model="selectedDepartment"
                      placeholder="请选择部门"
                    >
                      <el-option
                        v-for="department in departments.list"
                        :key="department.id"
                        :label="department.departName"
                        :value="department.orgCode"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="showDepartmentModal = false"
                    >关闭</el-button
                  >
                  <el-button type="primary" @click="changeDepartment"
                    >确认</el-button
                  >
                </div>
              </el-dialog>
              <Mima
                  :visible.sync="showPasswordDialog"
                  :form-label-width="formLabelWidth"
                />
  </div>
</template>

<script>
import Mima from '../components/Mima.vue';
import { getKcgData } from "@/api/kcgl";
import { getuserData } from "@/api/user";

export default {
  components: { Mima },
  name: "ZjNavbar",
  mounted() {
    this.getKcgdata();
    this.getuserdata();
  },
  data() {
    return {
      showTitle: false, // 是否显示标题
      breadList: [], // 面包屑导航
      showDeleteIcon: [], // 显示删除图标
      activeName: "second", // 选中菜单
      isCollapse: true, // 侧边栏是否收起
      showSearch: false, // 是否显示搜索框
      searchQuery: "", // 搜索内容
      menuItems: [], // 菜单数据
      //搜索框
      // options: [{}],
      menuItems: [
        { label: "首页", path: "/analysis" },
        { label: "采购入库", path: "/cgrk" },
        { label: "销售出库", path: "/xsck" },
        { label: "采购退货出库(红入)", path: "/cgthrk" },
        { label: "盘盈入库", path: "/pyrk" },
        { label: "涨吨入库", path: "/zdrk" },
        { label: "其他入库", path: "/qtrk" },
        { label: "盘亏出库", path: "/pkck" },
        { label: "其他出库", path: "/qtck" },
        { label: "库存调拨", path: "/kctb" },
        { label: "成本调整", path: "/cbtz" },
        { label: "库存盘点", path: "/kcpd" },
        { label: "物料库存", path: "/wlkc" },
        { label: "物料批次库存", path: "/wlpckc" },
        { label: "仓库物料库存", path: "/ckwlkc" },
        { label: "详细库存", path: "/xxkc" },
        { label: "出入库月汇总", path: "/crkyhz" },
        { label: "出入库日汇总", path: "/crkrdz" },
        { label: "出入库明细", path: "/crkmx" },
        { label: "客户", path: "/khgl" },
        { label: "供应商", path: "/gys" },
        { label: "仓库", path: "/ck" },
        { label: "物料分类", path: "/wlfl" },
        { label: "物料型号", path: "/wlxh" },
        { label: "计量单位", path: "/jldw" },
        { label: "币种", path: "/bz" },
        { label: "银行账户", path: "/bank" },
        { label: "销售发票", path: "/UserManagement" },
        { label: "销售发票(红冲)", path: "/RoleManagement" },
        { label: "销售发票(退货)", path: "/CaidanManagement" },
        { label: "采购发票", path: "/BumenManagement" },
        { label: "采购发票(红冲)", path: "/CodeCheckRule" },
        { label: "采购发票(退货)", path: "/roleUserList" },
        { label: "采购申请" },
        { label: "采购询价" },
        { label: "供应报价" },
        { label: "采购比价" },
        { label: "采购订单" },
        { label: "采购统计" },
        { label: "审批信息" },
        { label: "月度结账" },
        { label: "单据选项" },
        { label: "用户管理" },
        { label: "角色管理" },
        { label: "部门管理" },
        { label: "职务管理" },
        { label: "通讯录" },
        { label: "菜单管理" },
      ],
      searchQuery: "", // 搜索内容
      searchResults: [], // 搜索结果
      selectedMenu: [], // 选择的菜单
      homeData3: [], // 首页数据
      selectedDepartment: "", // 选择的部门
      showDepartmentModal: false, // 显示部门选择框
      departments: [], // 部门数据
      showPasswordDialog: false, // 控制密码修改对话框的显示
      passwordForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
     handleCommand(command) {
        // this.$message('click on item ' + command);
        if (command === "qiehuan") {
          this.showDepartmentModal = !this.showDepartmentModal;
        }
     
      },
      
    async getuserdata() {
      let res = await getuserData();
      if (res.success) {
        this.departments = res.result;
        console.log(this.departments, "1111");
        console.log(this.departments.list[0].departName, "2222");
        //遍历部门
        for (let i = 0; i < this.departments.list.length; i++) {
          if (this.departments.list[i].departName === this.currentDepartment) {
            this.selectedDepartment = this.departments.list[i].departName;
            break;
          }
        }
      } else {
        console.error("获取数据失败");
      }
    },
    //切换部门
    qiehuan() {
      this.showDepartmentModal = !this.showDepartmentModal;
    },
    //选择部门
    selectDepartment(department) {
      this.selectedDepartment = department.departName;
    },
    changeDepartment() {
      if (this.selectedDepartment) {
        // 更新当前部门
        this.currentDepartment = this.departments.find(
          (dept) => dept.value === this.selectedDepartment
        ).name;
        // 关闭弹出框
        this.showDepartmentModal = false;
        //点击确定关闭弹窗
      }
    },
    
    //跳
    cgrkto(path){
      if (this.$route.path !== path) {
        this.$router.push(path)
      }
    },
    //修改密码
    showChangePasswordDialog() {
      this.showPasswordDialog = true;
    },
    changePassword() {
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.$message.error("新密码和确认密码不匹配");
        return;
      }
    },
    //清理缓存
    clearCache() {
      console.log(111);

      // this.$message('click on item ' + command);

      localStorage.clear();
      sessionStorage.clear();
      this.$confirm("清理成功, 是否重新登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$router.push("/login");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    async getKcgdata() {
      let newdate = new Date().getTime();
      let data = {
        _t: Math.floor(newdate / 1000),
      };
      let res = await getKcgData(data);
      if (res.success) {
        this.homeData3 = res.result;
      } else {
        console.error("获取数据失败");
      }
    },
    //搜索
    searchMenu() {
      this.searchResults = this.menuItems.filter((item) =>
        item.label.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    },
    toggleSearch() {
      console.log(11111);

      this.showSearch = !this.showSearch;
    },
    handleSelectChange(value) {
      this.$router.push(value);
    },
    //跳
    cgrkto(path) {
      if (this.$route.path !== path) {
        this.$router.push(path);
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    back() {
      this.$confirm("即将退出系统, 是否继续?, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$router.push("/login");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },
    collapsefun() {
      this.isCollapse = !this.isCollapse;
      this.showTitle = !this.showTitle;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 面包屑导航
    isHome(route) {
      return route.name === "home";
    },
    updateBreadcrumb() {
      const currentMatched = this.$route.matched.slice();
      const newRoutes = [];
      currentMatched.forEach((route) => {
        const existingRoute = this.breadList.find(
          (item) => item.name === route.name
        );
        if (!existingRoute) {
          newRoutes.push(route);
        }
      });
      this.breadList = this.breadList.concat(newRoutes);
      this.showDeleteIcon = this.breadList.map(() => false);
    },
    toMenu(item) {
      if (this.$route.path !== item.path) {
        this.$router.push({ path: item.path }).catch((err) => {
          console.log("输出报错", err);
        });
      }
    },
    removeBreadcrumb(index) {
      const deletedItem = this.breadList.splice(index, 1)[0];
      this.showDeleteIcon.splice(index, 1);

      if (this.breadList.length > 0) {
        const lastRoute = this.breadList[this.breadList.length - 1];
        this.$router.push(lastRoute.path).catch((err) => {
          if (err.name !== "NavigationDuplicated") {
            console.error("导航错误:", err);
          }
        });
      } else if (this.breadList.length === 0 && this.$route.path !== "/") {
        this.$router.push("/").catch((err) => {
          if (err.name !== "NavigationDuplicated") {
            console.error("导航错误:", err);
          }
        });
      }
    },
    handleMouseEnter(index) {
      this.showDeleteIcon[index] = true;
      console.log(this.showDeleteIcon[index]);
    },
    handleMouseLeave(index) {
      this.$nextTick(() => {});
    },
  },
  watch: {
    $route(to, from) {
      this.updateBreadcrumb();
    },
  },
};
</script>

<style  lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.container {
  transition-duration: 0.1s;
  transition: all 0.3s ease;
  height: 100%;
}

.home_top {
  width: 100%;
  height: 9%;
  background-color: #1890ff;
}

.home_top_left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 58px;
  font-size: 18px;
  color: white;
  font-weight: 700;
  transition: padding-left 0.3s ease;
}

.home_dh {
  position: absolute;
  top: -20px;
  left: 202px;
}

.dh_left {
  margin-left: -131px !important;
  margin-right: 50px;
}

.dh_right {
  margin-left: 0px !important;
  margin-right: 10px;
}

.collapsebut:hover {
  background-color: #5eb2ff !important;
  transition: all 0.3s ease;
}

.context_right {
  float: right;
  margin-top: -390px;
  width: 100%;
  height: 500px;
  border: 5px solid red;
  background-color: #f0f2f5;
}

.el-header {
  background-color: #ffffff;
  color: #189eff;
  line-height: 60px;
}

.aside_min {
  width: 65px !important;
  transition: width 0.3s ease;
}

.aside_max {
  width: 201px !important;
}

.context_container {
  background-color: #f0f2f5;
}

.el-card__body
.el-main {
  padding: 5px 3px;
}

.nav-tuback {
  position: absolute;
  top: 0px;
  left: 1202px;
  width: 100px;
  margin-top: 40px;
  color: white;
  font-size: 17px;
  cursor: pointer;
}

.hy-gly {
  position: absolute;
  top: 0px;
  left: 1080px;
  width: 200px;
  margin-top: 37px;
  color: white;
  font-size: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: white;
}

.wzts {
  position: absolute;
  top: 0px;
  left: 1040px;
  width: 200px;
  margin-top: 42px;
  color: white;
  cursor: pointer;
}

.iii {
  position: absolute;
  top: 0px;
  left: 1000px;
  width: 200px;
  margin-top: 42px;
  color: white;
  cursor: pointer;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0;
}
.logo {
  margin-left: 10px;
}
.ccc {
  position: absolute;
  top: 0px;
  left: 960px;
  width: 200px;
  margin-top: 42px;
  color: white;
  cursor: pointer;
}
.breadcrumb {
  padding-left: 20px;
  font-size: 16px;
  // margin-left: 20px;
  line-height: 50px;
  width: 100%;
  background-color: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}
.el-breadcrumb__item {
  // width: 70px;
  height: 46px;
  text-align: center;
  cursor: pointer !important;
  margin: 0px;
}
.el-input__inner {
  background-color: #1890ff;
}
.delete-icon {
  visibility: hidden;
}
.search-box {
  background-color: #1890ff;
  position: absolute;
  top: 0px;
  left: 982px;
  width: 100px;
  margin-top: 37px;
  z-index: 1000;
}

.yiru:hover .delete-icon {
  visibility: visible;
  color: rgb(190, 188, 188);
}
.home_date {
  position: absolute;
  top: 6px;
  left: 55%;
  width: 140px;
  // margin-top: 42px;
  color: white;
  cursor: pointer;
  font-size: 14px;
}
</style>
